<template>
	<view>
		<u-sticky bgColor="#fff">
			<view class="mySearch">
				<u-search placeholder="搜索标志名称" :clearabled="true" v-model="title" @search="chaxun" @change="chaxun"
					@custom="chaxun" height="40" shape="square" color="#2B2B2B" :showAction="false"></u-search>
			</view>
			<u-gap height="1" bgColor="#f2f2f2"></u-gap>
			<u-tabs class="dropdown" :list="list" :lineWidth="80" lineColor="#0F53AC" :activeStyle="activeStyle"
				:scrollable="false" :inactiveStyle="inactiveStyle" :itemStyle="itemStyle" @click="tabsClick"
				:current="current">
			</u-tabs>
			<u-gap height="1" bgColor="#f2f2f2"></u-gap>
		</u-sticky>
		<view class="main">
			<view class="main_box" :class="[item.checked?'main_box_active':'']" v-for="item in markList" :key="item.id"
				@click="handleSelect(item)">
				<view class="image_box">
					<image :src="item.symbolPicture" />
				</view>
				<view class="text">{{item.symbolName}}</view>
				<view class="biaozhi biaozhi_avtive" v-if="item.checked">
					<u-icon name="checkmark" :color="'#fff'" size="16"></u-icon>
				</view>
				<view class="biaozhi" v-else></view>
			</view>
			<u-loadmore v-if="total>6" :status="status" :line="true" />
		</view>
		<view class="empty-data" v-if="markList.length==0">
			<u-empty mode="data" :marginTop="100"></u-empty>
		</view>

		<!-- 底部按钮 -->
		<view class="xing-subside"></view>
		<view class="xing-bottom-double">
			<view class="checked">已选：<span class="num">{{selectData.length}}</span></view>
			<view class="btn">
				<view class="btn-left" style="margin: 0 16rpx 0 60rpx;" @click="$dianji(handleCancel,'onoff1')">取消
				</view>
				<view class="btn-right" @click="$dianji(handleSubmit,'onoff2')">提交</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				onoff: true,
				onoff1: true,
				onoff2: true,
				activeStyle: {
					color: '#0F53AC',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					fontSize: "32rpx",
				},
				inactiveStyle: {
					color: '#8c8c8c',
					transform: 'scale(1)',
					fontSize: "32rpx",
				},
				itemStyle: {
					paddingLeft: '24rpx',
					// paddingRight: '30rpx',
					paddingTop: '24rpx',
					paddingBottom: '24rpx',
					height: '48rpx',
					fontSize: "32rpx",
				},
				//按钮样式
				actionStyle: {
					color: '#0F53AC',
					fontSize: "32rpx",
				},
				inputStyle: {
					fontSize: '32rpx',
				},
				current: 0,
				list: [{
					name: '指示标志',
				}, {
					name: '指令标志',
				}, {
					name: '警告标志',
				}, {
					name: '禁止标志',
				}],
				params: {
					pn: 1,
					ps: 6,
					keyword: '',
					symbolClassify: 1 // 1.提示标志；2.指令标志；3.警告标志；4.禁止标志；
				},
				pages: 1,
				total: 0,
				status: 'loadmore',
				//搜索值
				title: '',
				// 选中的集合
				selectData: [],
				// 数据源
				markList: [],
				symbolIds: '',
				symbolPictures: ''
			}
		},
		onLoad(options) {
			if (options.symbolIds) {
				this.symbolIds = options.symbolIds
				this.symbolPictures = options.symbolPictures
				let arr = []
				this.symbolIds.split(',').map((item, index) => {
					let obj = {
						id: item,
						symbolPicture: this.symbolPictures.split(',')[index]
					}
					arr.push(obj)
				})
				this.selectData = arr
			}
			this.getList()

		},
		onReachBottom() {
			if (this.params.pn >= this.pages) return;
			this.status = 'loading';
			this.params.pn = ++this.params.pn;
			setTimeout(() => {
				this.getList()
				if (this.params.pn >= this.pages) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		},
		methods: {
			tabsClick(e) {
				this.current = e.index
				this.params.pn = 1;
				this.markList = []
				this.params.symbolClassify = e.index + 1;
				this.getList()
			},
			//2.搜索功能
			//change
			chaxun() {
				//清空数据
				this.total = 0
				this.markList = []
				this.params.pn = 1
				this.params.keyword = this.title
				this.getList()
			},
			//cancel
			cancel() {
				this.title = ''
				this.total = 0
				this.markList = []
				this.params.pn = 1
				this.params.keyword = ''
				this.getList()
			},
			getList() {

				uni.$u.http.post(`/check/mobile/riskSafetySymbol/pageList`, this.params).then(res => {
					if (res.code == 0) {
						res.data.records.map(item => {
							item.checked = false
						})

						res.data.records.map(item => {
							this.selectData.map(it => {
								if (item.id == it.id) {
									item.checked = true
								}
							})
						})

						this.markList = this.markList.concat(res.data.records)
						this.pages = res.data.pages;
						this.total = res.data.total;
					}
				}).catch(err => {})
			},
			handleSelect(item) {
				if (item.checked) {
					item.checked = false
					this.selectData = this.selectData.filter(it => it.id != item.id)
				} else {
					item.checked = true
					this.selectData.push(item)
				}

			},
			handleCancel() {
				uni.navigateBack({
					delta: 1
				});
			},
			handleSubmit() {
				if (this.selectData.length > 9) {
					uni.$u.toast('最多可添加9个')
					return
				}
				uni.$emit('addSave', this.selectData);
				uni.navigateBack({
					delta: 1 //返回层数，2则上上页
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.mySearch {
		background-color: #fff;
		padding: 28rpx 32rpx;

		.u-input {
			background-color: #f2f2f2;
		}
	}

	.main {
		display: flex;
		flex-wrap: wrap;
		padding: 32rpx;

		.main_box {
			width: 44vw;
			border: 1px solid #f2f2f2;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
			position: relative;
			border-radius: 8rpx;

			.image_box {
				width: 100%;
				height: 44vw;

				image {
					width: 100%;
					height: 100%;
					border-radius: 8rpx 8rpx 0 0;
				}
			}

			.text {
				border-top: 1px solid #f2f2f2;
				padding: 24rpx 16rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				word-wrap: break-word;
				word-break: break-all;
			}

			.biaozhi {
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 0;
				right: 0;
				width: 30rpx;
				height: 30rpx;
				border: 2rpx solid #EDEDED;
				border-radius: 0px 8rpx 0px 8rpx;
			}

			.biaozhi_avtive {
				background-color: #0F53AC;
				color: #fff;
				border-color: #0F53AC;
			}
		}

		.main_box_active {
			border-color: #0F53AC;
		}

		.main_box:nth-child(2n) {
			margin-right: 0;
		}
	}

	.checked {
		font-size: 28rpx;
		color: #8C8C8C;

		.num {
			color: #4D4D4D
		}
	}

	.btn {
		flex: 1;
		display: flex;
	}
</style>
